<template>
  <dtDialog
    :title="orgTextMap[groupDialogStatus]"
    :visible.sync="orgDialogFormVisible"
    :is-loading="loading"
    @closeDialog="orgResetTemp()"
    @comfirmBtn="onSubmit()"
  >
    <DtForm :form-opts="config" :width-size="1" :ref-obj.sync="config.ref">
      <template #admingroupCascader>
        <el-cascader
          ref="cascader"
          v-model="config.formData.admingroupParentId"
          :options="cascaderOpts"
          filterable
          :disabled="groupDialogStatus !== 'create'"
          :props="{
            checkStrictly: true,
            value: 'admingroupId',
            label: 'admingroupName',
          }"
        />
      </template>
    </DtForm>
  </dtDialog>
</template>
<script>
import processClassifiy from '@/framework/api/processDesign/processClassifiy.js'
import { checkName } from '@/framework/utils/validate'
import { uuId } from '@/framework/utils/uuid'

export default {
  props: ['cascaderOpts'],
  data() {
    const groupNameValidate = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入分类名称'))
      } else if (!checkName(value)) {
        callback(new Error('请输入汉字、数字、大小写字母、下划线、中划线、中英文括号、特殊字符'))
      } else {
        callback()
      }
    }
    return {
      loading: false,
      orgDialogFormVisible: false,
      groupDialogStatus: '',
      orgTextMap: {
        update: '修改流程分类',
        create: '新增流程分类'
      },
      config: {
        ref: null,
        labelWidth: '120px',
        formData: {
          categoryName: '',
          categoryKey: '',
          sort: ''
        },
        labelPosition: 'right',
        columns: [
          {
            label: '分类名称',
            prop: 'categoryName',
            type: 'text',
            component: 'el-input',
            maxlength: 10
          },
          {
            label: '排序',
            prop: 'sort',
            type: 'text',
            component: 'el-input',
            maxlength: 8
            // bind: {
            //   min: 0,
            //   oninput: positiveInteger(8)
            // }
          },
          {
            label: '分类编码',
            prop: 'categoryKey',
            type: 'text',
            component: 'el-input',
            maxlength: 15
          }
        ],
        rules: {
          categoryName: [
            {
              required: true,
              trigger: 'blur',
              validator: groupNameValidate
            }
          ],
          categoryKey: [
            {
              required: true,
              message: '请输入分类编码',
              trigger: 'blur'
            },
            {
              pattern: /^[A-Za-z0-9_]+$/,
              message: '请输入字母或数字'
            }
          ],
          sort: [
            {
              required: true,
              message: '请输入排序',
              trigger: 'blur'
            },
            {
              pattern: /^[0-9]*$/,
              message: '请输入数字'
            }
          ]
        },
        cascaderOpts: []
      }
    }
  },
  methods: {
    // 关闭弹窗
    orgResetTemp() {
      this.config.formData = {
        categoryName: '',
        categoryKey: '',
        sort: ''
      }
      this.config.ref?.resetFields()
      // this.config.columns[0].isHideItem = false
    },
    // 打开新增弹窗
    openOrg(row, type, selectedOrg) {
      this.orgDialogFormVisible = true
      this.groupDialogStatus = type
      if (type === 'create') {
        this.config.formData.categoryKey = uuId(8)
        this.config.columns[2].disabled = false
      } else {
        this.config.formData = Object.assign({}, row)
        this.config.columns[2].disabled = true
      }
    },

    // 创建请求
    async onSubmit() {
      this.config.ref.validate((valid) => {
        if (valid) {
          this.loading = true
          const groupTempData = Object.assign({}, this.config.formData)
          groupTempData.sort = parseInt(groupTempData.sort)
          const fn =
            this.groupDialogStatus === 'create'
              ? processClassifiy.add
              : processClassifiy.edit
          fn(groupTempData)
            .then((res) => {
              if (res.code === '00000') {
                this.$parent.initTree()
                this.$dtMessage({
                  message: res.message,
                  type: 'success'
                })
                this.loading = false
                this.orgDialogFormVisible = false
                this.orgResetTemp()
              }
            })
            .catch(() => {
              this.loading = false
            })
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep .el-cascader {
  width: 100%;
}
</style>
